<template>
  <el-tabs v-model="activeName" type="card">
    <el-tab-pane label="域名设置" name="domain">
      <el-form
        :model="domainQueryParams"
        ref="domainQueryFormRef"
        label-width="auto"
        :inline="true"
      >
        <el-form-item label="发信域名" prop="domainName">
          <el-input
            v-model="domainQueryParams.domainName"
            placeholder="请输入发信域名"
            :clearable="true"
          />
        </el-form-item>
        <el-form-item>
          <el-button v-hasPermi="['market:marketSetting:list']" @click="handleClickDomainSearch">
            <Icon icon="ep:search" />
            搜索
          </el-button>
          <el-button @click="handleClickDomainReset">
            <Icon icon="ep:refresh" />
            重置
          </el-button>
          <el-button
            v-hasPermi="['market:marketSetting:domainCreate']"
            @click="handleClickDomainCreate"
          >
            <Icon icon="ep:plus" />
            新增
          </el-button>
        </el-form-item>
      </el-form>
      <Table ref="domainTableRef" :columns="domainColumns" :data="domainData">
        <template #menu="{ row }">
          <context-menu-item
            label="修改"
            @click="handleDomainMenuUpdate(row)"
            v-hasPermi="['market:marketSetting:domainUpdate']"
          />
          <context-menu-item
            label="删除"
            @click="handleMenuDeleted(row)"
            v-hasPermi="['market:marketSetting:domainDeleted']"
          />
        </template>
      </Table>
    </el-tab-pane>
    <el-tab-pane label="发件人设置" name="sender">
      <el-form
        :model="senderQueryParams"
        ref="senderQueryFormRef"
        label-width="auto"
        :inline="true"
      >
        <el-form-item label="发件人地址" prop="senderAddress">
          <el-input
            v-model="senderQueryParams.senderAddress"
            placeholder="请输入发件人地址"
            :clearable="true"
          />
        </el-form-item>
        <el-form-item label="发件人姓名" prop="senderName">
          <el-input
            v-model="senderQueryParams.senderName"
            placeholder="请输入发件人姓名"
            :clearable="true"
          />
        </el-form-item>
        <el-form-item label="回复人地址" prop="replyAddress">
          <el-input
            v-model="senderQueryParams.replyAddress"
            placeholder="请输入回复人地址"
            :clearable="true"
          />
        </el-form-item>
        <el-form-item>
          <el-button v-hasPermi="['market:marketSetting:list']" @click="handleClickSenderSearch">
            <Icon icon="ep:search" />
            搜索
          </el-button>
          <el-button @click="handleClickSenderReset">
            <Icon icon="ep:refresh" />
            重置
          </el-button>
          <el-button
            v-hasPermi="['market:marketSetting:senderCreate']"
            @click="handleClickSenderCreate"
          >
            <Icon icon="ep:plus" />
            新增
          </el-button>
        </el-form-item>
      </el-form>
      <Table ref="senderTableRef" :columns="senderColumns" :data="senderData">
        <template #menu="{ row }">
          <context-menu-item
            label="修改"
            @click="handleSenderMenuUpdate(row)"
            v-hasPermi="['market:marketSetting:senderUpdate']"
          />
          <context-menu-item
            label="删除"
            @click="handleMenuSenderDeleted(row)"
            v-hasPermi="['market:marketSetting:senderDeleted']"
          />
        </template>
      </Table>
    </el-tab-pane>
    <el-tab-pane label="回复人设置" name="reply">
      <el-form :model="replyQueryParams" ref="replyQueryFormRef" label-width="auto" :inline="true">
        <el-form-item label="回复人地址" prop="replyAddress">
          <el-input
            v-model="replyQueryParams.replyAddress"
            placeholder="请输入回复人地址"
            :clearable="true"
          />
        </el-form-item>
        <el-form-item label="回复人姓名" prop="replyName">
          <el-input
            v-model="replyQueryParams.replyName"
            placeholder="请输入回复人姓名"
            :clearable="true"
          />
        </el-form-item>

        <el-form-item>
          <el-button v-hasPermi="['market:marketSetting:list']" @click="handleClickReplySearch">
            <Icon icon="ep:search" />
            搜索
          </el-button>
          <el-button @click="handleClickReplyReset">
            <Icon icon="ep:refresh" />
            重置
          </el-button>
          <el-button
            v-hasPermi="['market:marketSetting:replyCreate']"
            @click="handleClickReplyCreate"
          >
            <Icon icon="ep:plus" />
            新增
          </el-button>
        </el-form-item>
      </el-form>
      <Table ref="replyTableRef" :columns="replyColumns" :data="replyData">
        <template #menu="{ row }">
          <context-menu-item
            label="修改"
            @click="handleReplyMenuUpdate(row)"
            v-hasPermi="['market:marketSetting:replyUpdate']"
          />
          <context-menu-item
            label="删除"
            @click="handleMenuReplyDeleted(row)"
            v-hasPermi="['market:marketSetting:replyDeleted']"
          />
        </template>
      </Table>
    </el-tab-pane>
  </el-tabs>
  <DomainEdit ref="domainEditRef" @success="handleClickDomainSearch" />
  <SenderEdit ref="senderEditRef" @success="handleClickSenderSearch" />
  <ReplyEdit ref="replyEditRef" @success="handleClickReplySearch" />
</template>
<script setup name="MarketSetting" lang="ts">
import * as MarketSettingApi from '@/api/market/marketSetting'
import DomainEdit from '@/views/market/marketSetting/DomainEdit.vue'
import SenderEdit from '@/views/market/marketSetting/SenderEdit.vue'
import ReplyEdit from '@/views/market/marketSetting/ReplyEdit.vue'
const message = useMessage() // 消息弹窗
const activeName = ref('domain')
const domainEditRef = ref()
const senderEditRef = ref()
const replyEditRef = ref()
const domainQueryFormRef = ref()
const senderQueryFormRef = ref()
const replyQueryFormRef = ref()
const domainTableRef = ref()
const senderTableRef = ref()
const replyTableRef = ref()
const domainQueryParams = ref({
  domainName: undefined
})
const senderQueryParams = ref({
  senderName: undefined,
  senderAddress: undefined,
  ownerId: undefined,
  replyAddress: undefined
})

const replyQueryParams = ref({
  replyAddress: undefined,
  replyName: undefined
})

const domainColumns = ref<any[]>([
  {
    label: '发信域名',
    prop: 'domainName',
    minWidth: '140'
  }
])

const senderColumns = ref<any[]>([
  {
    label: '发件人地址',
    prop: 'senderAddress',
    minWidth: '140',
    formatter: (row) => row.senderAddress + '@' + row.domain.domainName
  },
  {
    label: '发件人姓名',
    prop: 'senderName',
    minWidth: '140'
  },
  {
    label: '回复地址',
    prop: 'reply.replyName',
    minWidth: '140'
  },
  {
    label: '所属人',
    prop: 'owner.nickname',
    minWidth: '140'
  }
])

const replyColumns = ref<any[]>([
  {
    label: '回复人地址',
    prop: 'replyAddress',
    minWidth: '140'
  },
  {
    label: '回复人姓名',
    prop: 'replyName',
    minWidth: '140'
  },
  {
    label: '所属人',
    prop: 'owner.nickname',
    minWidth: '140'
  }
])

const domainData = ref()

const senderData = ref()

const replyData = ref()

onMounted(() => {
  dataInit()
  listQuery()
})

const dataInit = () => {
  domainQueryFormRef.value?.resetFields()
  senderQueryFormRef.value?.resetFields()
  replyQueryFormRef.value?.resetFields()
}

const listQuery = () => {
  handleClickDomainSearch()
  handleClickSenderSearch()
  handleClickReplySearch()
}

const handleClickDomainSearch = async () => {
  domainData.value = await MarketSettingApi.domainList(domainQueryParams.value)
}

const handleClickDomainReset = () => {
  domainQueryFormRef.value?.resetFields()
  handleClickDomainSearch()
}

const handleClickDomainCreate = () => {
  domainEditRef.value.open('create', 0)
}

const handleDomainMenuUpdate = (row) => {
  domainEditRef.value.open('update', row.id)
}

const handleMenuDeleted = async (row) => {
  await MarketSettingApi.deletedDomain(row.id)
  handleClickDomainSearch()
  message.success('删除成功')
}

const handleClickSenderSearch = async () => {
  senderData.value = await MarketSettingApi.senderList(senderQueryParams.value)
}

const handleClickSenderReset = () => {
  senderQueryFormRef.value?.resetFields()
  handleClickSenderSearch()
}

const handleClickSenderCreate = () => {
  senderEditRef.value.open('create', 0)
}

const handleSenderMenuUpdate = (row) => {
  senderEditRef.value.open('update', row.id)
}

const handleMenuSenderDeleted = async (row) => {
  await MarketSettingApi.deletedSender(row.id)
  handleClickSenderSearch()
  message.success('删除成功')
}

const handleClickReplySearch = async () => {
  replyData.value = await MarketSettingApi.replyList(replyQueryParams.value)
}

const handleClickReplyReset = () => {
  replyQueryFormRef.value?.resetFields()
  handleClickReplySearch()
}

const handleClickReplyCreate = () => {
  replyEditRef.value.open('create', 0)
}

const handleReplyMenuUpdate = (row) => {
  replyEditRef.value.open('update', row.id)
}

const handleMenuReplyDeleted = async (row) => {
  await MarketSettingApi.deletedReply(row.id)
  handleClickReplySearch()
  message.success('删除成功')
}
</script>
<style scoped>
:deep(.el-tabs__nav-scroll) {
  display: flex;
  justify-content: center;
}
</style>
